<template>
  <BasicLayout :title="title">
    <template slot="content">
      <div class="form-wrapper">
        <Stepper
          :activeStep="activeStep"
          :steps="steps"
          @changeStep="changeStep"
        />
        <mu-form :model="validateForm" label-position="top" label-width="100">
          <BasicFormItem
            v-for="item in formField[activeStep]"
            :key="item.prop"
            :item="item"
            :validateForm="validateForm"
          />
        </mu-form>
      </div>
    </template>
    <StepperBtn
      slot="footer"
      showPrev
      :len="steps.length"
      :activeStep="activeStep"
      @changeStep="changeStep"
      @complete="complete"
    />
  </BasicLayout>
</template>
<script>
import BasicLayout from "@/components/BasicLayout/index.vue";
import Stepper from "@/components/Stepper/index.vue";
import StepperBtn from "@/components/StepperBtn/index.vue";
import BasicFormItem from "@/components/BasicFormItem/index.vue";
export default {
  components: {
    BasicLayout,
    Stepper,
    StepperBtn,
    BasicFormItem,
  },
  props: {
    formField: Array,
    steps: Array,
    title: String,
  },
  data() {
    return {
      visibility: false,
      activeStep: Number(this.$route.query.step) ?? 0,
      validateForm: {},
    };
  },
  watch: {
    activeStep() {
      this.$router.replace({
        name: this.$route.name,
        query: { step: this.activeStep },
      });
    },
  },
  methods: {
    changeStep(index) {
      if (index <= this.steps.length - 1 && index >= 0) {
        this.activeStep = index;
      }
    },
    complete() {
      this.$router.push({ name: "Login" });
      this.$message({
        message: "注册成功",
        type: "success",
      });
    },
  },
};
</script>
<style scoped>
.registerForm >>> .mu-form-item-label {
  width: 100% !important;
}
.form-wrapper {
  padding-bottom: var(--footer-padding-bottom);
}
</style>
